<template>
    <el-config-provider namespace="el" v-if="load">
        <svg-icon></svg-icon>
        <!-- header -->
        <tool-header />
        <!-- 编辑 -->
        <!-- :style="getEditorStyle()" -->
        <div class="editor-container ">
            <backText></backText>
            <!-- 画布容器 -->
            <div class="editor-container-paint">
                <div class="editor-container-paint-view">
                    <div class="editor-container-paint-view-page" :style="page">
                        <Editor />
                    </div>
                </div>
            </div>
        </div>
        <!-- 左侧面板 -->
        <left-panel class="left_panel" />
        <!-- 配置 -->
        <panel class="panel" />
    </el-config-provider>
</template>
<script setup>
import { ref, computed } from 'vue'
import Editor from './components/Editor/Editor.vue'
import backText from './components/backText.vue'
import svgIcon from './components/svg/svg.vue'
import toolHeader from './components/toolHeader/toolHeader.vue'
import panel from './components/panel/panel.vue'
import leftPanel from './components/leftPanel/left-panel.vue'
import { userCardStore } from './store/userCardStore'
import { login } from '/@/api/index'


const load = ref(false)

login().then(() => {
    load.value = true
})

const cardStore = userCardStore()
const scroll = (e) => {
    cardStore.editor.scroll = e
}

// 更新滚动条状态
const scrollRef = ref(null)
const page = computed(() => {
    return {
        // width: cardStore.editor.width + 'px',
        // height: cardStore.editor.height + 'px',
        // transform: `scale(${cardStore.scale})`,
    }
})
// watch(page, () => {
//   nextTick(() => {
//     scrollRef.value.update()
//   })
// })
const getEditorStyle = () => {
    const { left, top, right, bottom } = cardStore.editor
    return `top:${top}px;left:${left}px;right:${right}px;bottom:${bottom}px;`
}
</script>
<style lang="less" scoped>
.editor-container {
    position: fixed;
    // top: 50px;
    // left: 208px;
    // right: 330px;
    // bottom: 32px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    &.mask::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        cursor: grabbing;
    }

    :deep(.el-scrollbar__thumb) {
        opacity: 0;
    }

    // border: 1px solid #ddd;
    .editor-container-paint {
        position: absolute;
        // inset: 64px 330px 0px 228px;

        .editor-container-paint-view {
            // position: absolute;
            position: relative;

            .editor-container-paint-view-page {
                position: absolute;
                transform-origin: left top;
            }
        }
    }
}

.panel {
    position: fixed;
    right: 0;
    width: 330px;
    top: 64px;
    right: 16px;
    bottom: 16px;
    box-shadow: border-box;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    background-color: #fff;
    border-radius: 4px;
    color: #303133;
    z-index: 100;
}

.left_panel {
    position: fixed;
    left: 16px;
    width: 188px;
    top: 16px;
    bottom: 16px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    background-color: #fff;
    border-radius: 4px;
    z-index: 50;
}
</style>
<!-- 覆盖elementui样式 -->
<style lang="less">
// tabs
// .my-el-tabs {
//     & > .el-tabs__header > .el-tabs__nav-wrap {
//         &::after {
//             display: none;
//         }

//         & > .el-tabs__nav-scroll {
//             & > .el-tabs__nav.is-top {
//                 width: 100%;

//                 & > .el-tabs__active-bar {
//                     bottom: inherit;
//                     top: 0;
//                 }

//                 & > .el-tabs__item {
//                     flex: 1;
//                     padding: 0;
//                     background-color: #3d404c;
//                     color: #bfbfbf;
//                     height: 36px;

//                     &.is-active {
//                         background-color: #232630;
//                         color: #fff;
//                     }
//                 }
//             }
//         }
//     }
// }
#app {
    min-height: 100vh;
    background-color: #f5f5f5;
}

body {
    overflow: hidden;

}

@keyframes twinkle {
    0% {
        transform: scale(0);
    }

    80% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes twinkle_out {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}
</style>
